<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>虚拟主机</title>
        <style type="text/css">
            body{
                background-color: #efefef;
            }
            .outer{
                width: 1190px;
                height: 600px;
                margin: 50px auto;
            }
            .item{
                width: 374px;
                height: 494.2px;
                background-color: white;
                float: left;
                padding: 40px 0 34px;
            }
            .item:hover{
                box-shadow:0px 10px 5px 0px #d1cbcb;
            }
            .item:hover .btn{
                background-color: #30c3f6;
            }
            .item-m{
                margin-left: 34px;
            }
            .head{
                width: 314px;
                height: 28px;
                margin: 0 30px;
                padding-bottom: 12px;
                border-bottom: 1px solid #e1e1e1;
                line-height: 1.1;
                font-size: 26px;
                color: #444;
                text-align: center;
            }
            .middle{
                width: 374px;
                height: 383.2px;
                background-color: #00F7DE;
            }
            .last{
                width: 374px;
                height: 46px;
                padding: 24px 0 0;
            }
            .btn{
                width: 220px;
                height: 46px;
                line-height: 46px;
                font-size: 16px;
                background-color: #2086ee;
                color: #fff;
                text-align: center;
                cursor: pointer;
                border: none;
                margin-left: 75px;
            }

        </style>
    </head>
    <body>
        <div class="outer">
            <div class="item">
                <div class="head">云峰A型 1G</div>
                <div class="middle"></div>
                <div class="last">
                    <a href="https://www.west.cn/services/webhosting/buy.asp?productid=w5">
                         <button class="btn">立即购买</button>
                    </a>
                </div>
            </div>
            <div class="item item-m">
                <div class="head">云峰B型 2G</div>
                <div class="middle"></div>
                <div class="last">
                    <a href="https://www.west.cn/services/webhosting/buy.asp?productid=w5">
                        <button class="btn">立即购买</button>
                    </a>
                </div>
            </div>
            <div class="item item-m">
                <div class="head">云峰C型 5G</div>
                <div class="middle"></div>
                <div class="last">
                    <a href="https://www.west.cn/services/webhosting/buy.asp?productid=w5">
                        <button class="btn">立即购买</button>
                    </a>
                </div>
            </div>
        </div>
    </body>
</html>